import React, { ReactElement, useState, useEffect } from 'react'
import { Table, Button, Space, Modal, message } from 'antd'
import { getArticles, delArticlesItem } from '@/api/article'
import { history } from 'umi'
const { confirm } = Modal;


interface Props {

}


export default function list({ }: Props): ReactElement {
    const [data, setData] = useState([])
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10
    })
    const [loading, setLoading] = useState(false)

    const columns = [
        {
            title: '序号',
            dataIndex: 'name',
            render: (name: any, item: any, index: number) => `${index + 1}`
        },
        {
            title: '所属分类',
            dataIndex: 'cate',
            render: (name: any) => {
                return <div>
                    {
                        name.map((item: any, index: number) => {
                            return <span key={item._id}>
                                {item.name} {index > 0 ? '' : '/'}
                            </span>
                        })
                    }
                </div>
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            align: "center"
        },
        {
            title: '操作',
            render: (item: any) => {
                return <Space>
                    <Button onClick={() => {
                        // history.push('/article/edit/' + item._id)
                        history.push({
                            pathname: "/article/edit",
                            state: {
                                id: item._id
                            }
                        })
                    }} type="primary">编辑</Button>
                    <Button onClick={() => {
                        del(item)
                    }} type="danger" >删除</Button>
                </Space>
            }
        }
    ];

    function del(item: any) {
        confirm({
            title: '此操作将永久删除该文件, 是否继续?',
            onOk() {
                delArticlesItem({
                    id: item._id
                }).then((res: any) => {
                    message.success(res.message)
                    getArticles({
                        current: 1,
                        pageSize: 10
                    }).then(res => {
                        let copyPagination = {
                            current: 1,
                            pageSize: 10
                        }
                        copyPagination.total = res.total
                        setData(res.data)
                        setPagination(copyPagination)
                    })
                })
            },
            onCancel() {
                message.info('已取消删除');
            },
        });
    }

    function handleTableChange(pageInfo: any) {
        setPagination(pageInfo)
        getArticles(pageInfo).then(res => {
            setData(res.data)
        })
    };

    useEffect(() => {
        getArticles(pagination).then((res: any) => {
            console.log(res)
            // total
            let copyPagination = { ...pagination }
            copyPagination.total = res.total
            setData(res.data)
            setPagination(copyPagination)
        })
    }, [])
    return (
        <div>
            <Button type="primary" onClick={() => {
                history.push("/article/add")
            }}>添加文章</Button>
            <Table
                columns={columns}
                rowKey={(record: any) => record._id}
                dataSource={data}
                pagination={pagination}
                loading={loading}
                onChange={handleTableChange}
            />
        </div>
    )
}
